<%@page import="com.surelution.tinyerp.FeeTypeCategory"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main"/>
<g:set var="entityName" value="${message(code: 'feeList.label', default: 'feeList')}" />
<g:javascript library="jquery"/>
<resource:dateChooser />
<link rel="stylesheet" href="${resource(dir:'css',file:'defaultTheme.css')}" />
<script type="text/javascript" src="${resource(dir:'js/jquery',file:'jquery.fixedheadertable.min.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js/jquery',file:'jquery.printElement.min.js')}"></script>
<title><g:message code="default.feeTotal.label" /></title>
	<script type="text/javascript">
		$(document).ready(function() {
		   $("#simplePrint").click(function() {
		       printElem({leaveOpen: true, printMode: 'popup', overrideElementCSS: ["${resource(dir:'plugins/richui-0.8/css',file:'calendarmonthview.css')}","${resource(dir:'css',file:'main.css')}"]});
		   });
		   $('#myTable01').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, autoShow: true });
		});
		function printElem(options){
		    $('#monthReport').printElement(options);
		};
		
	</script>
	<script type="text/javascript" src="${resource(dir:'js/datechooser',file:'datechooser.js')}"></script>
</head>

<body>
  <div class="body">
          <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></span>
            <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
          </div>
          <div>
            <p style="font-size:16px;color:#000;margin:10px 0;font-weight:bold;">费用查询</p>
        	<g:form action="report">
        		<label style="font-size:14px;color:#000;">选择日期：</label>
        		<g:datePicker name="startDay" precision="month" value="${startDay}"  />
        		至
        		<g:datePicker name="endDay" precision="month" value="${endDay}"  />
        		<br>
    			<label style="font-size:14px;color:#000;">选择费用类型：</label>
    			<g:each in="${feeList}" var="fee">
    				<g:checkBox id="selectType.id_${fee.id }" name="selectType" value="${fee.id }" checked="${selectType!=[]?selectType.contains(fee.id):true}"/><label for="selectType.id_${fee.id }">${fee.name}</label>&nbsp;
    			</g:each>
    			<span class="menuButton" style="margin-right:5px;"><g:actionSubmit value="${message(code: 'default.button.report.label', default: 'report')}" action="feeTotal"/></span>
			    <span class="menuButton"><g:actionSubmit value="${message(code: 'default.button.export.label', default: 'Export')}" action="gasExport"/></span>
			    <input type="button" value="打印报表" id="simplePrint" />
			</g:form>
			<g:if test="${flash.message}">
            	<div class="message">${flash.message}</div>
            </g:if>
        </div>
        <%
			def feeSum=0
		 %>
        <div id="monthReport" style="height:650px;width:800px;">
			<label style="font-size:16px;color:#000;">报表日期：  ${startDay?.format("yyyy年MM月")}到${endDay?.format("yyyy年MM月")} </label>
        		<table id="myTable01">
	        		<tr>
	        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:100px;">月份</td>
	        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:200px;">费用目录</td>
	        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:200px;">费用类型</td>
	          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;">金额(元)</td>
	    			</tr>
	    		<tbody>
    				<g:each in="${result}" var="r" status="i">
    				<%
						feeSum += r[3]
				 	%>
					<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
    					<td style="text-align:center;">${r[0].format("yyyy年MM月")}</td>
    					<td style="text-align:center;"> ${r[1].name}</td>
    					<td style="text-align:center;"> ${r[2].name}</td>
    					<td style="text-align:center;"> ${r[3]}</td>
    				</tr>
    				</g:each>
    				<tr>
	    				<td style="text-align:center;">总计</td>
	    				<td style="text-align:center;"></td>
	    				<td style="text-align:center;"></td>
	    				<td style="text-align:center;"><div id="feeSum"></div></td>
	    			</tr>
    			</tbody>
          	</table>
        </div>
		<script type="text/javascript">
			document.getElementById("feeSum").innerHTML = '${(formatNumber(number:feeSum,maxFractionDigits:2)) }';
        </script>
  </div>
</body>
</html>